<template>
    <div class="letsMeet">
        <DialogSlider v-if='showDialogSlider' :propsDialogSlider.sync="showDialogSlider" :propsList="pictureList" :propsIndex="0" propsDialogType="letsMeet"></DialogSlider>
        <PublicDialog :props="dialogData"></PublicDialog>
        <Loading :props="{type: 'page', show: loading}"> </Loading>
        <div class="moduleHead">
            <router-link v-if="userInfo.status.isGuest == 1" :to="{ name: 'upgrade' }">
                <span class="icon_gold"></span>
            </router-link>
            <div class="headNav">
                <router-link :to="{name:'browse'}">
                    <span>{{language.browse_serach}}</span>
                </router-link>
                <span class="active">{{language.browse_spark}}</span>
            </div>
            <div class="right rightActive ico_heart" @click="goSpark">
                <i v-if="stateNums.browseNum" class="newCount">{{stateNums.browseNum}}</i>
            </div>
        </div>
        <div class="body">
            <promptTip :props="promptipData"></promptTip>
            <div class="content" v-if="list.length">
                <div class="sliderBox">
                    <Item v-for="(item,index) in list" :key="item.icon" :data="item" :propsIndex="index" @letsMeetCallback="touchEndCallback" :init="init" ref="items" :showDialogSlider.sync="showDialogSlider"></Item>
                    <div class="repbox">
                        <span class="meet_pass" ref="dislike" @click="switchAnimate('left')"></span>
                        <span class="meet_like" ref="like" @click="switchAnimate('right')"></span>
                    </div>
                </div>
            </div>
            <div class="nextRound" v-if="finishedOne">
                <div class="paly_box">
                    <div class="paly" @click="getUserList()"></div>
                    <i class="main_bg"></i>
                </div>
                <p v-html="language.letsMeet_nextRoundText"></p>
            </div>
            <div class="countdown_wrap" v-if="finished">
                <div class="time">
                    <span class="main_border">{{waitTime.hours}}</span> :
                    <span class="main_border">{{waitTime.minutes}}</span> :
                    <span class="main_border">{{waitTime.seconds}}</span>
                </div>
                <div class="text">{{language.letsMeet_countdownText}}</div>
                <router-link :to="{ name: 'upgrade' }" v-if="userInfo.status.isGuest">
                    <button class="btn">
                        {{language.letsMeet_countdownButton}}
                    </button>
                </router-link>
            </div>
            <div class="match_layer" v-if="matched">
                <div class="match_layer_center">
                    <div class="title_img"></div>
                    <div class="text" v-html="language.letsMeet_matchSuccesText"></div>
                    <div class="avatar_box">
                        <div class="avatar">
                            <img :src="userInfo.photo.icon" alt="">
                        </div>
                        <div class="mutual_like_heart"></div>
                        <div class="avatar">
                            <img :src="likedUser.picture.icon" alt="">
                        </div>
                    </div>
                    <div class="button">
                        <button class="main_bg" @click="goMessage">{{language.letsMeet_sendMssage}}</button>
                        <button @click="keepPlay">{{language.letsMeet_continuePlaying}}</button>
                    </div>
                </div>
            </div>
        </div>
        <navBottom></navBottom>
    </div>
</template>
<script>
import Item from './LetsMeetItem';
import * as API from '../api';
import DialogSlider from './DialogSlider'
import PublicDialog from './PublicDialog'
import Loading from './Loading'
import promptTip from './PromptTip'
import navBottom from './NavBottom'
import permissionPartMixin from '../common/permissionPartMixin';

let condition = {
        restart: 0
    },
    hst_id = '',
    sparkType = 'likes';

export default {

    name: 'letsMeet',

    mixins: [permissionPartMixin],

    components: {
        Item,
        DialogSlider,
        PublicDialog,
        Loading,
        promptTip,
        navBottom
    },

    data() {
        return {
            loading: true,
            init: true,
            userList: [],
            showDialogSlider: false,
            dialogData: {},
            promptipData: {},
            noPhoto: false,
            matched: false,
            finishedOne: false,
            finished: false,
            finishedText: '',
            waitTime: {},
            likedUser: {},

        }
    },

    activated() {
        if (this.userList.length == 0) {
            this.getUserList();
        }
        this.setSiteNavBottom('browse', this.$route.name);
    },

    computed: {

        stateNums: function() {
            let stateObj = this.$store.state.base.siteNumState,
                obj = {
                    browseNum: 0,
                };
            if (typeof(stateObj) != 'undefined' && typeof(stateObj.mutually_count) != 'undefined') {
                obj.browseNum = this.judgeNum(parseInt(stateObj.mutually_count.new_count));
            }
            return obj;
        },

        userInfo() {
            return this.$store.state.user.userInfo;
        },

        list() {
            let tthis = this,
                list = [];
            if (this.noPhoto || this.userInfo.pictures.length == 0) {
                list = [{ noPhoto: true }];
            } else {
                _.forEach(this.userList, function(val) {
                    let baseInfo = [];
                    [val.age, val.gender, val.city, val.state].map(function(val) {
                        if (val) baseInfo.push(val);
                    });
                    if (baseInfo.length === 3) {
                        baseInfo.push(val.country);
                    }
                    list.push({
                        icon: val.picture.icon,
                        picture: val.picture.picture,
                        username: val.username,
                        photoNumber: val.numberofpictures,
                        baseInfo: baseInfo.join(', '),
                        body: val.body,
                        gender: val.gender,
                        disability: tthis.permissionPartMixin_MultiSelectStr('ms_disability', val.disability)
                    })

                });
            }
            return list.reverse();
        },

        pictureList() {
            let list = [],
                arr = this.userList[0].public_photos;
            for (let i in arr) {
                list.push({
                    mssrc: arr[i].icon,
                    src: arr[i].picture,
                    pid: arr[i].item_id,
                    title: arr[i].desc,
                    w: arr[i].ix || 200,
                    h: arr[i].iy || 200,
                    data: {
                        prof_id: this.userList[0].usr_id,
                        prof_name: this.userList[0].username
                    },
                });
            }
            return list;
        },
    },

    methods: {
        goMessage() {
            this.$router.push({
                name: 'message',
                query: {
                    userName: likedUser.username,
                    userId: likedUser.usr_id
                }
            });
            this.keepPlay();
        },

        keepPlay() {
            this.matched = false;
            this.nextUser();
        },

        goSpark() {
            this.$router.push({
                name: 'spark',
                query: {
                    type: sparkType
                }
            });
        },

        getUserList() {
            let tthis = this;
            if (Unit.getSessionStorage('letsmeetRestart')) {
                condition.restart = 1;
                Unit.removeSessionStoreage('letsmeetRestart');
            } else {
                condition.restart = 0;
            }
            if (Unit.getSessionStorage('letsMeetAddCustomCard')) {
                condition = { restart: condition.restart };
            } else {
                condition.like_me_count = 1;
            }
            API.meet_recommend({
                data: condition,
                success: result => {
                    if (parseInt(result.like_me_count) < 1 || tthis.userInfo.status.isGuest) {
                        Unit.setSessionStorage('letsMeetAddCustomCard', true);
                    }
                    if (parseInt(result.mutually_count) > 0) {
                        sparkType = 'mutualLikes';
                    } else {
                        sparkType = 'likes';
                    }
                    if (result.errmsg) {
                        tthis.noPhoto = true;
                        return;
                    }
                    if (result.ret) {
                        if (result.ret == 'finished_one_round') {
                            tthis.finishedOne = true;
                            tthis.finished = false;
                            Unit.setSessionStorage('letsmeetRestart', true);
                            // console.log('finished_one_round')
                        } else {
                            tthis.finished = true;
                            tthis.finishedText = tthis.userInfo.status.isGuest ? tthis.language.letsMeet_countdownText : tthis.language.letsMeet_countdownGoldText;
                            tthis.updateWaitTime(result.time);
                        }
                        return;
                    }
                    if (result.res.length == 0) {
                        tthis.promptipData = {
                            type: 'noSpark',
                            content: tthis.language.letsMeet_noMemberMsg,
                            btn: {
                                label: tthis.language.connections_promptBtnSearch,
                                callback: function() {
                                    tthis.$router.push('/browse');
                                }
                            }
                        }
                        return;
                    }
                    hst_id = result.hst_id;
                    setTimeout(function() {
                        tthis.userList = result.res;
                    }, 300)
                },
                complete: () => {
                    tthis.loading = false;
                }
            })
        },

        updateWaitTime(time) {
            let tthis = this;
            if (!time) return;
            let timer = setInterval(function() {
                if (!time) {
                    tthis.finished = false;
                    tthis.finishedOne = true;
                    clearInterval(timer);
                }
                let hours = Math.floor(time / 3600),
                    minutes = Math.floor((time % 3600) / 60),
                    seconds = Math.floor((time % 3600) % 60);
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                tthis.waitTime = { hours: hours, minutes: minutes, seconds: seconds };
                --time;
            }, 1000);
        },

        touchEndCallback(type) {
            let tthis = this;
            console.log(418, this.userList[0].usr_id, type)
            if (this.userInfo.account.hidden == 1) {
                this.openProfile(function() { tthis.touchEndCallback(type) });
                return;
            }
            if (type == 'y') {
                this.likedUser = this.userList[0];
            }
            API.meet({
                data: {
                    meet: type,
                    match_id: tthis.userList[0].usr_id,
                    username: tthis.userList[0].username,
                    icon: tthis.userList[0].picture.icon,
                    hst_id: hst_id
                },
                success: result => {
                    if (result.msg == 'no_photo' || result.msg == 'profile_photo_hidden') {
                        tthis.$store.dispatch('user_loginOut', tthis);
                        return;
                    }
                    if (type == 'y') {
                        if (parseInt(result.if_meet_me) === 1) {
                            tthis.matched = true;
                            return;
                        }
                    }
                }
            });
            tthis.nextUser();
        },

        nextUser() {
            this.userList.shift();
            if (this.userList.length == 0) {
                this.loading = true;
                this.getUserList();
                this.init = true;
            } else {
                this.init = false;
            }
        },

        openProfile(callback) {
            let tthis = this;
            tthis.dialogData = {
                position: 'middle',
                content: {
                    title: tthis.language.userProfile_hiddenProfileTip,
                    info: tthis.language.userProfile_hiddenProfileText,
                    btn: [{
                        label: tthis.language.userProfile_OpenProfile,
                        btnCallback: function() {
                            tthis.loading = true;
                            let obj = {};
                            obj.data = {
                                hide: 0
                            };
                            obj.callback = function() {
                                callback()
                            };
                            obj.complete = function() {
                                tthis.loading = false;
                            };
                            tthis.$store.dispatch('user_updateProfileStatus', obj);
                        }
                    }]
                },
            };
        },

        switchAnimate(direction) {
            let tthis = this,
                time = 300,
                itemLength = this.$refs.items.length;
            if (this.userInfo.pictures.length == 0) return;
            if (this.userInfo.account.hidden == 1) {
                this.openProfile(function() { tthis.switchAnimate(direction) });
                return;
            }
            this.$refs.items[itemLength - 1].setCss(direction == 'left' ? -400 : 400, 80, time, direction);
            setTimeout(function() {
                tthis.touchEndCallback(direction == 'left' ? 'n' : 'y')
            }, time);
        }
    }
}

</script>
<style scoped>
.letsMeet {
    width: 100%;
    background: #fff;
    padding-top: 44px;
    padding-bottom: 50px;
}

.letsMeet .moduleHead i.newCount {
    position: absolute;
    right: 4px;
    top: 6px;
    min-width: 8px;
    border-radius: 7px;
    background: #f64747;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
    transform: scale(.9);
}

.letsMeet .moduleHead .ico_heart {
    background: url(../assets/ico_heart.png) center no-repeat;
    background-size: 24px;
    height: 44px;
}

.letsMeet .content {
    position: relative;
    height: 100%;
}

.letsMeet .sliderBox {
    margin: auto;
    position: relative;
    height: 100%;
}

.letsMeet .repbox {
    max-width: 480px;
    max-height: 600px;
    position: absolute;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 30px 26px 10px 26px;
}

@media screen and (orientation:landscape) {
    .letsMeet .repbox {
        min-height: 388px;
    }
}

.letsMeet .repbox span {
    height: 67px;
    width: 67px;
    display: block;
    background-repeat: no-repeat;
    background-size: 133px auto;
    background-image: url(../assets/ico_letsmeet_rep.png);
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -94px;
}

.letsMeet .repbox span.meet_pass {
    background-position: 0 0;
}

.letsMeet .repbox span.meet_like {
    margin-left: 27px;
    background-position: 0 -67px;
}


.letsMeet .repbox span.meet_passon {
    background-position: -67px 0;
}


.letsMeet .repbox span.meet_likeon {
    background-position: -67px -67px;
}

.letsMeet .sliderBox .item:nth-last-child(n+4) {
    -webkit-transform: translate(0px, 14px) scale(0.9, 1);
    -moz-transform: translate(0px, 14px) scale(0.9, 1);
}

.letsMeet .sliderBox .item:nth-last-child(4) {
    -webkit-transform: translate(0px, 14px) scale(0.9, 1);
    -moz-transform: translate(0px, 14px) scale(0.9, 1);
}

.letsMeet .sliderBox .item:nth-last-child(3) {
    -webkit-transform: translate(0px, 7px) scale(0.95, 1);
    -moz-transform: translate(0px, 7px) scale(0.9, 1);
}

.letsMeet .sliderBox .item:nth-last-child(2) {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
}


.letsMeet .match_layer {
    z-index: 999;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    vertical-align: middle;
}

.letsMeet .match_layer .title_img {
    width: 100%;
    height: 80px;
    background: url(../assets/match_title.png) no-repeat center;
    background-size: 300px;
    margin-bottom: 20px;
}

.letsMeet .match_layer_center {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    overflow: hidden;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.letsMeet .match_layer_center .text {
    color: #fff;
    font-size: 20px;
    line-height: 24px;
}

.letsMeet .match_layer_center button {
    width: 72%;
    max-width: 300px;
    font-size: 16px;
    height: 42px;
    margin: 22px 22px 0 22px;
    color: #fff;
}

.letsMeet .match_layer_center button:last-child {
    /*background: none;
    border: 2px solid #fff;*/
    line-height: 40px;
    background: none;
    border: 1px solid #fff;
}

.letsMeet .match_layer_center .avatar_box {
    margin-top: 30px;
    margin-bottom: 10px;
    position: relative;
}

.letsMeet .match_layer_center .avatar_box .mutual_like_heart {
    position: absolute;
    top: 22px;
    left: 50%;
    margin-left: -36px;
    width: 72px;
    height: 72px;
    display: inline-block;
    background: url(../assets/mutual_like_heart.png) no-repeat center;
    background-size: 72px;
}

.letsMeet .match_layer_center .avatar_box .avatar {
    background: #fff;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 0 8px;
    display: inline-block;
    overflow: hidden;
    border: 3px solid #fff;
}

.letsMeet .countdown_wrap {
    padding-top: 190px;
    padding-bottom: 100px;
    text-align: center;
    color: #1e1e1e;
}

.letsMeet .countdown_wrap .time {
    line-height: 60px;
    font-size: 20px;
}

.letsMeet .countdown_wrap .time span {
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
    padding: 0 11px;
    margin: 0 4px;
}

.letsMeet .countdown_wrap .text {
    padding-top: 20px;
    padding-bottom: 38px;
    font-size: 15px;
}

.letsMeet .countdown_wrap button {
    max-width: 230px;
}


.letsMeet .nextRound {
    padding-top: 180px;
    padding-bottom: 100px;
    text-align: center;
    color: #1e1e1e;
}

.letsMeet .nextRound p {
    line-height: 20px;
}

.letsMeet .nextRound .paly_box {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.letsMeet .nextRound .paly {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 136px;
    height: 136px;
    background: url(../assets/letsmeet_play.png) no-repeat center;
    background-size: 136px;
}

.letsMeet .nextRound i {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    top: -12px;
    left: -12px;
    z-index: 0;
    opacity: 0;
    -webkit-animation: halo 1.5s 0s infinite ease-out;
    -moz-animation: halo 1.5s 0s infinite ease-out;
    animation: halo 1.5s 0s infinite ease-out;
}

@-webkit-keyframes halo {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2);
    }
}

@-moz-keyframes halo {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -moz-transform: scale(1.2);
    }
}

@keyframes halo {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

</style>
